<script lang="ts" setup>
import { showSuccessAlert } from "@util/showAlert"
import { copyTxt, getExpiredTime, getLocal } from "@util/index"

const props = defineProps<{
  link: string;
  linkIndex?: number;
  imgShow: boolean;
  delShow: boolean;
}>()
const emits = defineEmits<{
  (e: "del", index: number, name: string): void
}>()
const showLink = `${import.meta.env.VITE_HTTP_TYPE}${import.meta.env.VITE_PREFIX_URL}/${props.link}`
const expiredTime = getExpiredTime(props.link)

function copy() {
  copyTxt('.btn')
  showSuccessAlert("粘贴完成", "Copy finished")
}
</script>

<template>
  <div class="show-img">
    <img v-if="imgShow" :src="showLink" alt="img load error">
    <input type="text" :value="showLink" disabled />
    <p class="exired">{{expiredTime ? $t("showImg.expireTxt", {en:expiredTime,cn:expiredTime}) : ""}}</p>
    <div class="btn" @click="copy" :data-clipboard-text="showLink">{{$t("showImg.copy")}}</div>
    <div v-if="delShow" class="del" @click="$emit('del', linkIndex as number, link)">{{$t("showImg.delete")}}</div>
  </div>
</template>

<style lang="scss" >
.show-img {
  @include center;
  flex-wrap: nowrap;
  width: 80%;
  margin-top: 12px;
  padding-bottom: 12px;
  position: relative;

  img {
    width: 100px;
    height: 100px;
    object-fit: cover;
  }

  .exired {
    position: absolute;
    bottom: 15px;
    font-size: 14px;
    left: 128px;
    color: $themeFontColor;
  }

  input {
    width: 70%;
    height: 36px;
    margin-left: 28px;
    color: #0000008c;
    background-color: #f9f9f9;
    padding: 0 8px;
  }


  .btn,
  .del {
    height: 36px;
    line-height: 36px;
    padding: 0 12px;
    background-color: #957e5b;
    color: #f9f9f9;
    cursor: pointer;
    white-space: nowrap;
  }

  .del {
    border-left: 1px solid #f9f9f9;
  }

  div:hover {
    color: $themeColor;
  }
}
</style>
